<template>
  <view class="content">
    <!-- 商家信息 -->
    <view class="businessBox">
      <view class="businessTitle">
        商家信息
      </view>
      <view class="businessItem oneBusinessItem">
        <view class="lable">
          店铺名称<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input style="width: 400rpx;" placeholder="请输入店铺名称(字数≤20)" border="none" v-model="create_order.shop_name" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          邀请共创人员
        </view>
        <view class="rBox" style="font-size: 24rpx;">
          <span style="color: rgba(0,0,0,0.8);">{{commonName}}</span>
          <view class="inviteBtn" @tap="goCoCreate">
            点击邀请
          </view>
        </view>
      </view>
      <view class="businessItem" @tap="categoryShow = true">
        <view class="lable">
          品类
        </view>
        <view class="rBox">
          <span style="color: rgba(0,0,0,0.4);">{{category_name}}</span>
          <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          是否连锁
        </view>
        <view class="rBox">
          <view class="" style="margin-right: 48rpx;" v-for="(item,i) in chain_type_data" :key="i">
            <image v-if="!item.flag" class="radioImg" src="../../static/img/radio.png" mode="" @tap="radioBtn(item)">
            </image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode="" @tap="radioBtn(item)"></image>
            {{item.chain_type_name}}
          </view>
          <!--  <view class="" @tap="type = 1">
            <image v-if="type == 0" class="radioImg" src="../../static/img/radio.png" mode=""></image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""></image>
            连锁店
          </view> -->
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          商家ID<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入商家ID" border="none" v-model="create_order_detail.shop_id" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          是否公开
        </view>
        <view class="rBox" style="font-size: 24rpx;">
          <span style="color: rgba(0,0,0,0.4);">不公开仅达人报名后可见</span>
          <u-switch v-model="value13" activeColor="#7D81A9" inactiveColor="rgba(0,0,0,0.1)" @change="asyncChange"
            space="2"></u-switch>
          <span style="width: 72rpx;text-align: right;">{{msg}}</span>
        </view>
      </view>
      <!-- 门店信息 -->
      <view class="shopBox">
        <view class="shopTitle">
          门店信息<span class="red">*</span>
        </view>
        <view class="shopCard" v-for="(item,index) in shopInfo" :key="index">
         
          <view class="shopCardItem">
            <view class="lable">
              门店<span class="red">*</span>
            </view>
            <view class="rBox">
              <u--input placeholder="请输入门店" border="none" v-model="item.store_name" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem" @tap='showCityPicker(index)'>
            <view class="lable">
              省市区<span class="red">*</span>
            </view>
            <view class="rBox">
              <span v-if="!item.province" style="color: rgba(0,0,0,0.4);">请选择省市区</span>
              <span v-else>{{item.province}}-{{item.city}}-{{item.area}}</span>
              <image class="rightFillImg" src="../../static/img/rightFill.png" mode=""></image>
            </view>
          </view>
          <view class="shopCardItem">
            <view class="lable">
              详细地址<span class="red">*</span>
            </view>
            <view class="rBox">
              <u--input placeholder="请输入详细地址" border="none" v-model="item.address" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem">
            <view class="lable">
              门店联系人
            </view>
            <view class="rBox">
              <u--input placeholder="请输入联系人" border="none" v-model="item.contacts_name" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem" style="border: none;">
            <view class="lable">
              联系电话
            </view>
            <view class="rBox">
              <u--input placeholder="请输入联系电话" border="none" v-model="item.contacts_phone" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>


        </view>
      </view>
    </view>

    <!-- 商单信息 -->
    <view class="businessBox" style="padding-bottom: 36rpx;">
      <view class="businessTitle">
        商单信息
      </view>
      <view class="shopCard orderCard">
        <view class="shopCardItem">
          <view class="lable">
            商单联系人
          </view>
          <view class="rBox">
            <u--input placeholder="请输入联系人" border="none" v-model="create_order_detail.order_contacts_name"
              fontSize="28rpx" placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
              inputAlign="right"></u--input>
          </view>
        </view>
        <view class="shopCardItem">
          <view class="lable">
            电话<span class="red">*</span>
          </view>
          <view class="rBox">
            <u--input placeholder="请输入电话号码" border="none" v-model="create_order_detail.order_contacts_phone"
              fontSize="28rpx" placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
              inputAlign="right"></u--input>
          </view>
        </view>
        <view class="shopCardItem">
          <view class="lable">
            微信
          </view>
          <view class="rBox">
            <u--input placeholder="请输入微信号" border="none" v-model="create_order_detail.order_contacts_wx"
              fontSize="28rpx" placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
              inputAlign="right"></u--input>
          </view>
        </view>
        <view class="shopCardItem" ref="isOneQrCode" @tap="upImg(1)" :class="{ewm : isOneQrCode}">
          <view class="lable">
            联系人微信二维码
          </view>
          <view class="rBox">
            <span style="color: rgba(0,0,0,0.4);" v-if="!create_order_detail.order_contacts_wx_qrcode">请上传微信二维码</span>
            <image v-if="!create_order_detail.order_contacts_wx_qrcode" class="addimg" src="../../static/img/add1.png" mode=""></image>
            <image style="width: 136rpx;height: 136rpx;" v-if="create_order_detail.order_contacts_wx_qrcode" :src="create_order_detail.order_contacts_wx_qrcode" mode=""></image>
          </view>
        </view>
        <view class="shopCardItem" @tap="upImg(2)"  :class="{ewm : isTwoQrCode}">
          <view class="lable">
            商单群二维码
          </view>
          <view class="rBox">
            <span  v-if="!create_order_detail.order_contacts_group_qrcode"  style="color: rgba(0,0,0,0.4);">请上传商群二维码</span>
            <image v-if="!create_order_detail.order_contacts_group_qrcode"  class="addimg" src="../../static/img/add1.png" mode=""></image>
            <image style="width: 136rpx;height: 136rpx;" v-if="create_order_detail.order_contacts_group_qrcode" :src="create_order_detail.order_contacts_group_qrcode" mode=""></image>
          </view>
        </view>
        <view class="shopCardItem" style="border: none;">
          <view class="lable">
            是否公开
          </view>
          <view class="rBox" style="font-size: 24rpx;">
            <span style="color: rgba(0,0,0,0.4);">不公开仅达人报名后可见</span>
            <u-switch v-model="value14" activeColor="#7D81A9" inactiveColor="rgba(0,0,0,0.1)" @change="asyncChangeTwo"
              space="2"></u-switch>
            <span style="width: 72rpx;text-align: right;">{{msg1}}</span>
          </view>
        </view>

      </view>
      <view class="businessItem" style="border-top: 2rpx solid #EDEFF2;" @tap="showCityTwo">
        <view class="lable">
          面向城市<span class="red">*</span>
        </view>
        <view class="rBox">
          <span>{{create_order.city_data}}</span>
          <image class="addimg" src="../../static/img/add1.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem" @tap="contentFormShow = true">
        <view class="lable">
          内容形式<span class="red">*</span>
        </view>
        <view class="rBox">
          <span>{{content_type_name}}</span>
          <image class="addimg" src="../../static/img/add1.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem" @tap="remunerateShow = true">
        <view class="lable">
          商单报酬<span class="red">*</span>
        </view>
        <view class="rBox">
          <span>{{remunerate_type_name}}</span>
          <image class="addimg" src="../../static/img/add1.png" mode=""></image>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable" style="flex: 1;">
          是否投流
        </view>
        <view class="rBox">
          <u-switch v-model="value15" activeColor="#7D81A9" inactiveColor="rgba(0,0,0,0.1)" @change="asyncChangeThree"
            space="2"></u-switch>
          <span v-if="value15">备注</span>
          <u--input v-if="value15" placeholder="请输入备注" border="none" v-model="create_order_detail.flow_remark"
            fontSize="28rpx" placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable" style="flex: 1;">
          招募人数
        </view>
        <view class="rBox">
          <u--input v-if="create_order.recruit_num != '0'" placeholder="请输入招募人数(≤999)" border="none"
            v-model="create_order.recruit_num" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right" maxlength="3"></u--input>
          <image style="margin-left: 66rpx;" v-if="!recruitNumber" class="radioImg" src="../../static/img/radio.png"
            mode="" @tap="recruitNumberBtn"></image>
          <image style="margin-left: 66rpx;" v-else class="radioImg" src="../../static/img/radio1.png" mode=""
            @tap="recruitNumberBtn"></image>
          不限

        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          产品体验
        </view>
        <view class="rBox">
          <view class="" style="margin-right: 48rpx;" @tap="create_order_detail.experience_state = 0">
            <image v-if="create_order_detail.experience_state == 1" class="radioImg" src="../../static/img/radio.png"
              mode=""></image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""></image>
            无体验
          </view>
          <view class="" @tap="create_order_detail.experience_state = 1">
            <image v-if="create_order_detail.experience_state == 0" class="radioImg" src="../../static/img/radio.png"
              mode=""></image>
            <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""></image>
            销售套餐
          </view>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          探店人数限制
        </view>
        <view class="rBox">
          <u--input v-if="create_order_detail.exploring_num != '0'" placeholder="请输入探店人数" border="none"
            v-model="create_order_detail.exploring_num" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
          <image style="margin-left: 66rpx;" v-if="!exploringNum" class="radioImg" src="../../static/img/radio.png"
            mode="" @tap="exploringNumBtn"></image>
          <image style="margin-left: 66rpx;" v-else class="radioImg" src="../../static/img/radio1.png" mode=""
            @tap="exploringNumBtn"></image>
          不限

        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          标签话题
        </view>
        <view class="rBox">
          <u--input placeholder="请输入标签话题" border="none" v-model="create_order_detail.label" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          其它
        </view>
        <view class="rBox">
          <u--input placeholder="请输入(字数≤50)" border="none" v-model="create_order_detail.other_remark" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="miniCard">
        <view class="miniCardItem">
          <view class="miniCardItemName">
            招募周期
          </view>
          <span v-if="create_order.recruit_start_time != 0">{{create_order.recruit_start_time}} -
            {{create_order.recruit_end_time}}</span>
          <image class="addImg" src="../../static/img/add1.png" mode="" @tap="cycle(1)"></image>
          <view class="vertical">
          </view>
          <image v-if="!recruitCycle" class="radioImg" src="../../static/img/radio.png" mode="" @tap="recruitCycleBtn">
          </image>
          <image v-if="recruitCycle" class="radioImg" src="../../static/img/radio1.png" mode="" @tap="recruitCycleBtn">
          </image>
          <view class="">
            不限
          </view>
        </view>
        <view class="miniCardItem">
          <view class="miniCardItemName">
            探店周期
          </view>
          <span v-if="create_order_detail.exploring_start_time != 0">{{create_order_detail.exploring_start_time}} -
            {{create_order_detail.exploring_end_time}}</span>
          <image class="addImg" src="../../static/img/add1.png" mode="" @tap="cycle(2)"></image>
          <view class="vertical">
          </view>
          <image v-if="!exploringCycle" class="radioImg" src="../../static/img/radio.png" mode=""
            @tap="exploringCycleBtn">
          </image>
          <image v-if="exploringCycle" class="radioImg" src="../../static/img/radio1.png" mode=""
            @tap="exploringCycleBtn">
            <view class="">
              不限
            </view>
        </view>
        <view class="miniCardItem" style="border: none;">
          <view class="miniCardItemName">
            发布时间
          </view>
          <span v-if="create_order_detail.show_start_time != 0">{{create_order_detail.show_start_time}} -
            {{create_order_detail.show_end_time}}</span>
          <image class="addImg" src="../../static/img/add1.png" mode="" @tap="cycle(3)"></image>
          <view class="vertical">
          </view>
          <image v-if="!showCycle" class="radioImg" src="../../static/img/radio.png" mode="" @tap="showCycleBtn">
          </image>
          <image v-if="showCycle" class="radioImg" src="../../static/img/radio1.png" mode="" @tap="showCycleBtn">
            <view class="">
              不限
            </view>
        </view>
      </view>
    </view>

    <!-- 邀约达人信息 -->
    <view class="businessBox" style="margin: 24rpx 0;">
      <view class="businessTitle">
        邀约达人信息
      </view>
      <!-- 达人信息 -->
      <view class="shopBox">
        <view class="shopCard miniCard" v-for="(item,index) in create_order_anchor" :key="index">
          <view class="miniCardItem">
            <view class="miniCardItemName">
              带货力等级要求<span class="red">*</span>
            </view>
            <span>{{sales_level}}</span>
            <image class="addImg" src="../../static/img/add1.png" @tap="grade(1,index)"></image>
            <view class="vertical">
            </view>
            <image v-if="!salesCycle" class="radioImg" src="../../static/img/radio.png" mode="" @tap="salesCycleBtn(index)">
            </image>
            <image v-if="salesCycle" class="radioImg" src="../../static/img/radio1.png" mode="" @tap="salesCycleBtn(index)">
              <view class="">
                不限
              </view>
          </view>
          <view class="miniCardItem">
            <view class="miniCardItemName">
              内容力等级要求
            </view>
            <span>{{content_level}}</span>
            <image class="addImg" src="../../static/img/add1.png" mode="" @tap="grade(2,index)"></image>
            <view class="vertical">
            </view>
            <image v-if="!contentCycle" class="radioImg" src="../../static/img/radio.png" mode=""
              @tap="contentCycleBtn(index)">
            </image>
            <image v-if="contentCycle" class="radioImg" src="../../static/img/radio1.png" mode=""
              @tap="contentCycleBtn(index)">
              <view class="">
                不限
              </view>
          </view>
          <view class="shopCardItem">
            <view class="lable">
              粉丝量
            </view>
            <view class="rBox">
              <u--input placeholder="请输入" border="none" v-model="item.fans_num" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem">
            <view class="lable">
              招募人数<span class="red">*</span>
            </view>
            <view class="rBox">
              <u--input placeholder="请输招募人数" border="none" v-model="item.level_recruit_num" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
            </view>
          </view>
          <view class="baochouBox" style=" height: 168rpx;">
            <view class="lable">
              商单报酬<span class="red">*</span>
            </view>
            <view class="baochou">
              <view class="Zhihuan" @tap="type = 1" v-for="(item1,i) in remunerate_type_data" :key="i">
                <image v-if="!item1.flag" class="radioImg" src="../../static/img/radio.png" mode=""
                  @tap="order_remunerate_btn(item1,index)"></image>
                <image v-else class="radioImg" src="../../static/img/radio1.png" mode=""
                  @tap="order_remunerate_btn(item1,index)"></image>
                {{item1.remunerate_type_name}}
              </view>
              <input class="ipt" v-model="item.service_price" type="text" placeholder="请输入服务费">
            </view>
          </view>
          <view class="shopCardItem">
            <view class="lable">
              佣金<span class="red">*</span>
            </view>
            <view class="rBox">
              <u--input placeholder="请输入佣金金额" border="none" v-model="item.price" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>
          <view class="shopCardItem businessItem">
            <view class="lable">
              性别
            </view>
            <view class="rBox">
              <view class="" @tap="genderBtn(1,index)" style="margin-right: 24rpx;">
                <image v-if="gender == '1'" class="radioImg" src="../../static/img/radio1.png" mode=""></image>
                <image v-else class="radioImg" src="../../static/img/radio.png" mode=""></image>
                男
              </view>
              <view class="" @tap="genderBtn(2,index)" style="margin-right: 24rpx;">
                <image v-if="gender == 2" class="radioImg" src="../../static/img/radio1.png" mode=""></image>
                <image v-else class="radioImg" src="../../static/img/radio.png" mode=""></image>
                女
              </view>
              <view class="" @tap="genderBtn(0,index)">
                <image v-if="gender == 0" class="radioImg" src="../../static/img/radio1.png" mode=""></image>
                <image v-else class="radioImg" src="../../static/img/radio.png" mode=""></image>
                不限
              </view>
            </view>
          </view>
          <view class="shopCardItem businessItem">
            <view class="lable">
              其它
            </view>
            <view class="rBox">
              <u--input placeholder="请输入(字数≤20)" border="none" v-model="item.remark" fontSize="28rpx"
                placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" maxlength="20"
                inputAlign="right"></u--input>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 带货商品信息 -->
    <view class="businessBox" style="padding-bottom: 32rpx;">
      <view class="businessTitle">
        带货商品信息
      </view>
      <view class="businessItem">
        <view class="lable">
          商品名称<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入商品名称" border="none" v-model="create_order_detail.goods_name" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          商品ID<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入商品ID" border="none" v-model="create_order_detail.goods_id" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          价格<span class="red">*</span>
        </view>
        <view class="rBox">
          <u--input placeholder="请输入价格" border="none" v-model="create_order_detail.goods_price" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="bottomItem">
        <view class="bottomItemName">
          佣金期限
        </view>
        <span v-if="create_order_detail.goods_start_time != 0">{{create_order_detail.goods_start_time}} -
          {{create_order_detail.goods_end_time}}</span>
        <image class="addImg" src="../../static/img/add1.png" mode="" @tap="cycle(4)"></image>
        <view class="vertical">
        </view>
        <image v-if="!goodsCycle" class="radioImg" src="../../static/img/radio.png" mode="" @tap="goodsCycleBtn">
        </image>
        <image v-if="goodsCycle" class="radioImg" src="../../static/img/radio1.png" mode="" @tap="goodsCycleBtn">
          <view class="">
            不限
          </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          商品介绍
        </view>
        <view class="rBox">
         <!-- <u--input  placeholder="请输入商品介绍" border="none" v-model="create_order_detail.goods_introduce" fontSize="28rpx" plac style="text-align: right;"></u--input> -->
        <input type="text" placeholder="请输入商品介绍" style="text-align: right;font-size: 28rpx;" placeholder-style="text-align: right;color: rgba(0,0,0,0.4);">
        
        </view>
      </view>
      <view class="businessItem">
        <view class="lable">
          素材提供
        </view>
        <view class="rBox">
          <u--input placeholder="请提供视频下载链接" border="none" v-model="create_order_detail.material" fontSize="28rpx"
            placeholderStyle="font-size: 28rpx;color: rgba(0,0,0,0.4);" inputAlign="right"></u--input>
        </view>
      </view>
      <view class="askBox">
        <view class="askTitle">
          内容要求:
        </view>
        <textarea v-model="create_order_detail.content_ask" class="txt_word"
          placeholder="例如:\n1.需要拍摄清晰门头，logo要大\n2.产品需要有明确特写，充分体现产品形态和色泽\n3.真人出镜，真人配音，一号一人"
          placeholder-style="font-size:24rpx;color: rgba(0,0,0,0.3);" maxlength="100" count></textarea>
      </view>
    </view>

    <!-- 底部按钮区域 -->
    <view class="bottomBox">
      <view class="bottomTitle">
        创建过程中有任何问题，请在个人中心咨询我的客服。
      </view>
      <view class="btns">
        <view class="deleteBtn">
          删除
        </view>
        <view class="confirmBtn" @tap="create_orderBtn">
          确认
        </view>
      </view>
    </view>
    <!-- 省市区三级选择器 -->
    <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
      @onConfirm="onConfirm"></mpvue-city-picker>
    <!-- 省市二级选择器 -->
    <mpvue-city-picker1 ref="mpvueCityPickerTwo" :pickerValueDefault="pickerValueDefault"
      @onConfirm="onConfirmTwo"></mpvue-city-picker1>

    <!-- 选择品类弹出框 -->
    <u-popup :round="10" :show="categoryShow" closeable @close="categoryShowClose">
      <view class="categoryShowContent">
        <view class="" style="font-size: 32rpx;font-weight: 550;">
          请选择品类
          <span style="font-size: 24rpx;color: rgba(0,0,0,0.4);margin-left: 16rpx;">单选</span>
        </view>
        <view class="categoryList">
          <view class="categoryItem" :class="{active : item.flag}" v-for="(item,i) in categoryList" :key="i"
            @tap="selectTag(item)">
            {{item.category_name}}
          </view>
        </view>
        <view class="categoryBtns">
          <view class="categoryBtnL" @tap="categoryShowClose">
            取消
          </view>
          <view class="categoryBtnR" @tap="category">
            确认
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 内容形式弹出框 -->
    <u-popup :round="10" :show="contentFormShow" closeable @close="contentFormShowClose">
      <view class="categoryShowContent">
        <view class="" style="font-size: 32rpx;font-weight: 550;">
          请选择商品类目
          <span style="font-size: 24rpx;color: rgba(0,0,0,0.4);margin-left: 16rpx;">单选</span>
        </view>
        <view class="categoryList">
          <view class="categoryItem" :class="{active : item.flag}" v-for="(item,i) in content_data" :key="i"
            @tap="contentType(item)">
            {{item.content_type_name}}
          </view>
        </view>
        <view class="categoryBtns">
          <view class="categoryBtnL" @tap="contentFormShowClose">
            取消
          </view>
          <view class="categoryBtnR" @tap="contentFormBtn">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 商单报酬弹出框 -->
    <u-picker :show="remunerateShow" :columns="columns" keyName="remunerate_type_name" @close="remunerateShow = false"
      @confirm="remunerateBtn"></u-picker>
    <!-- 日期范围弹框 -->
    <u-calendar color="#7D81A9" monthNum="12" :show="canlendarShow" mode="range" @confirm="calendarBtn"
      @close="canlendarShow = false"></u-calendar>

    <!-- 等级选择器 -->
    <u-picker :show="gradeShow" :columns="gradeColumns" keyName="label" @confirm="gradeConfirm"
      @cancel="gradeShow = false"></u-picker>
  </view>

</template>

<script>
  import mpvueCityPicker from '../../components/mpvue-citypicker/mpvueCityPicker.vue'
  import mpvueCityPicker1 from '../../components/mpvue-citypicker/mpvueCityPicker1.vue'
  export default {
    data() {
      return {
        commonName:'共创人员可编辑商单和筛选达人',
        order_sn: '',
        columns: [],
        index: '',
        index1:'',
        category_name: '请选择品类', // 品类名字
        content_type_name: '', // 内容形式名字
        remunerate_type_name: '', // 商单报酬名字
        type: 0, // 0 是非连锁，1 是连锁
        imgType: '',
        gender: '',
        value13: false,
        value14: false,
        value15: false,
        limit: false,
        categoryShow: false,
        contentFormShow: false,
        remunerateShow: false,
        canlendarShow: false,
        recruitCycle: false,
        exploringCycle: false,
        isOneQrCode: false,
        isTwoQrCode: false,
        showCycle: false,
        goodsCycle: false,
        recruitNumber: false,
        exploringNum: false,
        gradeShow: false,
        salesCycle: false,
        contentCycle: false,
        content_level: '',
        sales_level: '',
        msg: '不公开',
        msg1: '不公开',
        shopInfo: [{
          store_name: "", //门店名称
          province: "", //省
          city: "", //市
          area: "", //区
          address: "", //详细地址
          contacts_name: "", //联系人
          contacts_phone: "" //联系电话
        }],
        imgUrl:'',
        // 商单品类
        categoryList: [],
        // 创建商单数据
        create_order: {
          shop_name: '',
          category_id: '',
          chain_type_id: '',
          store_state: '',
          city_data: '',
          content_type_id: '',
          order_remunerate_id: '',
          recruit_num: '',
          recruit_start_time: '',
          recruit_end_time: ''
        },
        //商单报酬
        remunerate_type_data: [],
        // 内容形式
        content_data: [],
        // 连锁
        chain_type_data: [],
        cycleType: '',
        // 创建商单详情数据
        create_order_detail: {
          order_sn: '',
          shop_id: '',
          order_contacts_name: '',
          order_contacts_phone: '',
          order_contacts_wx: '',
          order_contacts_wx_qrcode: '',
          order_contacts_group_qrcode: '',
          order_contacts_state: '',
          is_flow: '',
          flow_remark: '',
          experience_state: '',
          exploring_num: '',
          label: '',
          other_remark: '',
          exploring_start_time: '',
          exploring_end_time: '',
          show_start_time: '',
          show_end_time: '',
          goods_name: '',
          goods_id: '',
          goods_price: '',
          goods_start_time: '',
          goods_end_time: '',
          goods_introduce_type: '',
          goods_introduce: '',
          material: '',
          content_ask: ''
        },
        // 创建商单邀约达人信息
        create_order_anchor: [{
          sales_level: '', //带货力等级，1~7，0为不限
          content_level: '', //内容力等级，1~7，0为不限
          fans_num: '', //粉丝量
          level_recruit_num: '', //该等级招募人数
          order_remunerate_id: '', //商单报酬ID
          service_price: '', //服务费
          price: '', //佣金
          gender: '0', //性别，1：男，2：女，0：不限
          remark: '' //备注
        }],
        gradetype: '',
        gradeColumns: [
          [{
            label: 'Lv1',
            id: 1
          }, {
            label: 'Lv2',
            id: 2
          }, {
            label: 'Lv3',
            id: 3
          }, {
            label: 'Lv4',
            id: 4
          }, {
            label: 'Lv5',
            id: 5
          }, {
            label: 'Lv6',
            id: 6
          }, {
            label: 'Lv7',
            id: 7
          }]
        ],
        user_id: ''
      };
    },
    onShow() {
      this.get_choose_data()
    },
    onLoad(obj) {
      this.user_id = obj.user_id
      this.commonName = obj.nickname
      this.get_order_detail(obj)
    },
    components: {
      mpvueCityPicker,
      mpvueCityPicker1
    },
    methods: {
      async get_order_detail(obj) {
        const {
          data: res
        } = await uni.$http.post('order/get_order_detail', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
          return
        }
       this.create_order.shop_name = res.data.shop_name
       this.create_order.city_data = res.data.city_data
      },
      // 点击图片上传
      upImg(n) {
        // n为1的时候是上传微信二维码  2上传微信商群二维码
        this.imgType = n
        const _this = this;
        uni.chooseImage({
          count: 1, //最多可以选择的图片张数，默认9
          sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
          sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
          success(res) {
            // 调用上传图片的接口
            console.log(res);
            _this.uploadPhoto(res.tempFilePaths);
          },
        })

      },
      uploadPhoto(tempFilePaths) {
        console.log(tempFilePaths[0]);
        const that = this;
        uni.uploadFile({
          url: 'https://skdjmwj99.bxsmmcy.com/api/others/upload_evaluate', //开发者服务器 url
          header: {
            'token': uni.getStorageSync('token')
            // 'token': '97e8f791-13a5-4fc0-ae8e-9877abce1234'
          },
          filePath: tempFilePaths[0], // 要上传文件资源的路径
          name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
          success(res) {
            console.log(res);
            var result = JSON.parse(res.data)
            if (result.code != 1) {
              that.toast.msg(res.msg)
              return
            }
            if (that.imgType == 1) {
              that.create_order_detail.order_contacts_wx_qrcode = result.data.url
              that.isOneQrCode = true
            }
            if (that.imgType == 2) {
              that.create_order_detail.order_contacts_group_qrcode = result.data.url
              that.isTwoQrCode = true
            }
            if (that.imgType == 3) {
              that.imgUrl = result.data.url
            }
          },
        })
      },
      genderBtn(n, index) {
        this.create_order_anchor[index].gender = n
        this.gender = n
      },
      order_remunerate_btn(i, index) {
        this.remunerate_type_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order_anchor[index].order_remunerate_id = i.id
          } else {
            item.flag = false
          }
        })
      },
      salesCycleBtn(index) {
        this.salesCycle = !this.salesCycle
        if (this.salesCycle == true) {
          this.create_order_anchor[index].sales_level = 0
          this.sales_level = ''
        } else {
          this.create_order_anchor[index].sales_level = ''
        }
      },
      contentCycleBtn(index) {
        this.contentCycle = !this.contentCycle
        if (this.contentCycle == true) {
          this.create_order_anchor[index].content_level = 0
          this.content_level = ''
        } else {
          this.create_order_anchor[index].content_level = ''
        }
      },
      grade(n,index) {
        this.gradetype = n
        this.index1 = index
        this.gradeShow = true
      },
      gradeConfirm(e) {
        if (this.gradetype == 1) {
          this.create_order_anchor[this.index1].sales_level = e.value[0].id
          this.sales_level = e.value[0].label
        }
        if (this.gradetype == 2) {
          this.create_order_anchor[this.index1].content_level = e.value[0].id
          this.content_level = e.value[0].label
        }
        this.gradeShow = false
      },
      addPeople() {
        this.create_order_anchor.push({
          sales_level: '', //带货力等级，1~7，0为不限
          content_level: '', //内容力等级，1~7，0为不限
          fans_num: '', //粉丝量
          level_recruit_num: '', //该等级招募人数
          order_remunerate_id: '', //商单报酬ID
          service_price: '', //服务费
          price: '', //佣金
          gender: '0', //性别，1：男，2：女，0：不限
          remark: '' //备注
        })
      },
      // 1，创建商单
      async create_orderBtn() {
        const {
          data: res
        } = await uni.$http.post('create_order/create_order', this.create_order)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        this.order_sn = res.data.order_sn
        this.create_order_detail.order_sn = this.order_sn
        this.create_order_detailBtn()

      },
      // 2、创建商单详情
      async create_order_detailBtn() {
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_detail', this.create_order_detail)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        this.order_sn = res.data.order_sn
        this.create_order_storeBtn()

      },
      // 3、创建商单门店信息
      async create_order_storeBtn() {
        const obj = {
          order_sn: this.order_sn,
          data: this.shopInfo
        }
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_store', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        this.order_sn = res.data.order_sn
        this.create_order_anchorBtn()
      },
      // 4、创建商单邀约达人信息
      async create_order_anchorBtn() {
        console.log(this.create_order_anchor);
        const obj = {
          order_sn: this.order_sn,
          data: this.create_order_anchor
        }
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_anchor', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        this.order_sn = res.data.order_sn
        console.log('创建商单邀约达人信息4');
        this.create_order_common_user()
      },
      // 5.创建上单共创人员
      async create_order_common_user() {
        const obj = {
          order_sn: this.order_sn,
          user_id: this.user_id
        }
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_common_user', obj)
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        uni.showToast({
          icon: 'success',
          title: '创建成功'
        })
      },
      remunerateBtn(index) {
        this.remunerate_type_name = index.value[0].remunerate_type_name
        this.create_order.order_remunerate_id = index.value[0].id
        this.remunerateShow = false
      },
      async get_choose_data() {
        const {
          data: res
        } = await uni.$http.post('index/get_choose_data', {
          type: 1
        })
        if (res.code != 1) {
          this.toast.msg(res.msg)
        }
        res.data.category_data.forEach((item) => {
          item.flag = false
        })
        res.data.chain_type_data.forEach((item) => {
          item.flag = false
        })
        res.data.remunerate_type_data.forEach((item) => {
          item.flag = false
        })
        this.categoryList = res.data.category_data
        this.remunerate_type_data = res.data.remunerate_type_data
        this.columns.push(this.remunerate_type_data)
        this.content_data = res.data.content_data
        this.chain_type_data = res.data.chain_type_data
        console.log(this.chain_type_data);
      },
      // 实现品类单选
      selectTag(i) {
        this.categoryList.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.category_id = i.id
            this.category_name = i.category_name
          } else {
            item.flag = false
          }
        })
      },
      // 实现内容形式单选
      contentType(i) {
        this.content_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.content_type_id = i.id
            this.content_type_name = i.content_type_name
          } else {
            item.flag = false
          }
        })
      },
      // 实现商单报酬单选
      remunerateType(i) {
        this.content_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.content_type_id = i.id
            this.content_type_name = i.content_type_name
          } else {
            item.flag = false
          }
        })
      },
      // 实现是否连锁
      radioBtn(i) {
        this.chain_type_data.forEach((item) => {
          if (i.id == item.id) {
            item.flag = true
            this.create_order.chain_type_id = i.id
          } else {
            item.flag = false
          }
        })
      },
      category() {
        this.categoryShow = false
      },
      contentFormBtn() {
        this.contentFormShow = false
      },
      // 品类选择框关闭
      categoryShowClose() {
        this.categoryShow = false
        this.category_name = '请选择品类'
        this.create_order.category_id = ''
      },
      // 内容形式选择框关闭
      contentFormShowClose() {
        this.contentFormShow = false
        this.content_type_name = ''
        this.create_order.content_type_id = ''
      },
      // 打开地址选择
      showCityPicker(i) {
        this.index = i
        this.$refs.mpvueCityPicker.show()
      },
      // 打开地址选择
      showCityTwo() {
        console.log(111);
        this.$refs.mpvueCityPickerTwo.show()
      },
      onConfirm(e) {
        const arr = e.label.split("-")
        this.shopInfo[this.index].province = arr[0]
        this.shopInfo[this.index].city = arr[1]
        this.shopInfo[this.index].area = arr[2]
      },
      onConfirmTwo(e) {
        const arr = e.label.split("-")
        this.create_order.city_data = arr[1]
      },
      asyncChange(e) {
        this.value13 = e
        if (this.value13 == false) {
          this.msg = '不公开'
          this.create_order.store_state = 0
        }
        if (this.value13 == true) {
          this.msg = '公开'
          this.create_order.store_state = 1
        }
      },
      asyncChangeTwo(e) {
        this.value14 = e
        if (this.value14 == false) {
          this.msg1 = '不公开'
          this.create_order_detail.order_contacts_state = 0
        }
        if (this.value14 == true) {
          this.msg1 = '公开'
          this.create_order_detail.order_contacts_state = 1
        }
      },
      asyncChangeThree(e) {
        this.value15 = e
        if (this.value15 == false) {
          this.create_order_detail.is_flow = 0
        }
        if (this.value15 == true) {
          this.create_order_detail.is_flow = 1
        }
      },
      
      // 创建商单门店信息
      async create_order_store() {
        const {
          data: res
        } = await uni.$http.post('create_order/create_order_store', this.shopInfo)
        if (res.data != 1) {
          this.toast.msg(res.msg)
        }
      },
      // 删除门店信息表单
      deleted(index) {
        if (this.shopInfo.length > 1) {
          this.shopInfo.splice(index, 1);
        }
      },
      // 删除达人信息表单
      deletedAnchor(index) {
        if (this.create_order_anchor.length > 1) {
          this.create_order_anchor.splice(index, 1);
        }
      },
      recruitCycleBtn(n) {
        this.recruitCycle = !this.recruitCycle
        if (this.recruitCycle == true) {
          this.create_order.recruit_start_time = '0'
          this.create_order.recruit_end_time = '0'
        }
      },
      exploringCycleBtn(n) {
        this.exploringCycle = !this.exploringCycle
        if (this.exploringCycle == true) {
          this.create_order_detail.exploring_start_time = '0'
          this.create_order_detail.exploring_end_time = '0'
        }
      },
      showCycleBtn(n) {
        this.showCycle = !this.showCycle
        if (this.showCycle == true) {
          this.create_order_detail.show_start_time = '0'
          this.create_order_detail.show_end_time = '0'
        }
      },
      goodsCycleBtn(n) {
        this.goodsCycle = !this.goodsCycle
        if (this.goodsCycle == true) {
          this.create_order_detail.goods_start_time = '0'
          this.create_order_detail.goods_end_time = '0'
        }
      },
      recruitNumberBtn(n) {
        this.recruitNumber = !this.recruitNumber
        if (this.recruitNumber == true) {
          this.create_order.recruit_num = '0'
        } else {
          this.create_order.recruit_num = ''
        }
      },
      exploringNumBtn(n) {
        this.exploringNum = !this.exploringNum
        if (this.exploringNum == true) {
          this.create_order_detail.exploring_num = '0'
        } else {
          this.create_order_detail.exploring_num = ''
        }
      },
      // 判断招募周期或探店周期
      cycle(n) {
        this.cycleType = n
        this.canlendarShow = true
      },
      // 选择日期范围
      calendarBtn(e) {
        // cycleType == 1是 招募周期 == 2是探店周期
        if (this.cycleType == 1) {
          this.create_order.recruit_start_time = e[0] 
          this.create_order.recruit_end_time = e[1] 
        }
        if (this.cycleType == 2) {
          this.create_order_detail.exploring_start_time = e[0]
          this.create_order_detail.exploring_end_time = e[1]
        }
        if (this.cycleType == 3) {
          this.create_order_detail.show_start_time = e[0]
          this.create_order_detail.show_end_time = e[1]
        }
        if (this.cycleType == 4) {
          this.create_order_detail.goods_start_time = e[0]
          this.create_order_detail.goods_end_time = e[1]
        }
        this.canlendarShow = false
      },
      goCoCreate() {
        uni.navigateTo({
          url:'../coCreate/coCreate'
        })
      }
    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #F2F3F6;
    padding-top: 32rpx;

    .bottomItem {
      box-sizing: border-box;
      padding-right: 40rpx;
      display: flex;
      align-items: center;
      height: 110rpx;
      border-bottom: 2rpx solid #EDEFF2;
      font-size: 28rpx;
      color: #000;

      .bottomItemName {
        flex: 1;
      }

      .addImg {
        width: 48rpx;
        height: 48rpx;
      }

      .radioImg {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }

    }


    .radioImg {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
      vertical-align: middle;
    }

    .red {
      color: #E64F5E;
    }

    .businessBox {
      font-size: 28rpx;
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      padding-left: 40rpx;

      .addPeopleCardBtn {
        width: 338rpx;
        height: 78rpx;
        border: 2rpx solid #7D81A9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: #7D81A9;
        font-size: 28rpx;
        border: 2rpx solid #7D81A9;

        image {
          width: 26rpx;
          height: 26rpx;
          margin-right: 8rpx;
        }
      }

      .rightFillImg {
        width: 12rpx;
        height: 12rpx;
        margin-left: 16rpx;
      }

      .businessTitle {
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 600;
        color: #000000;
      }

      .businessItem {
        box-sizing: border-box;
        padding-right: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 108rpx;
        line-height: 108rpx;
        border-bottom: 2rpx solid #EDEFF2;
   
        .rBox {
          display: flex;
          align-items: center;
       
          .addimg {
            width: 42rpx;
            height: 42rpx;
          }

          .inviteBtn {
            // font-size: 24rpx;
            width: 128rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            background: rgba(125, 129, 169, 0.1);
            border-radius: 40rpx;
            color: #7D81A9;
            margin-left: 8rpx;
          }



          .radioImg {
            width: 36rpx;
            height: 36rpx;
            margin-right: 16rpx;
            vertical-align: middle;
          }
        }
      }

      .shopCard {
        box-sizing: border-box;
        width: 670rpx;
        // height: 714rpx;
        background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
        border-radius: 16rpx;
        padding: 0 32rpx;
        margin-bottom: 32rpx;

        .deleteBtn {
          position: relative;
          height: 66rpx;

          .deleteImg {
            position: absolute;
            top: 28rpx;
            right: 28rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }

        .shopCardItem {
          box-sizing: border-box;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 108rpx;
          line-height: 108rpx;
          border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
          
          .rBox {
            display: flex;
            align-items: center;

            .addimg {
              width: 48rpx;
              height: 48rpx;
              margin-left: 16rpx;
            }
          }

          /deep/.u-switch {
            width: 76rpx;
            height: 44rpx;
            margin: 0 10rpx;
          }
        }
        .ewm {
          height: 200rpx!important;
        }

      }

      .shopBox {
        padding-bottom: 40rpx;
        margin-bottom: 16rpx;

        .shopTitle {
          box-sizing: border-box;
          height: 98rpx;
          line-height: 98rpx;
        }

        .addShopCardBtn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 226rpx;
          height: 78rpx;
          margin: 0 auto;
          color: #7D81A9;
          font-size: 28rpx;
          border: 2rpx solid #7D81A9;

          image {
            width: 26rpx;
            height: 26rpx;
            margin-right: 8rpx;
          }
        }
      }

      .orderCard {
        width: 670rpx;
        background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-bottom: 34rpx;
      }
    }

    .miniCard {
      box-sizing: border-box;
      padding: 0 24rpx;
      width: 670rpx;
      // height: 332rpx;
      background: linear-gradient(135deg, #F2F3F6 0%, rgba(242, 243, 246, 0) 100%);
      border-radius: 16rpx;
      margin-top: 32rpx;

      .miniCardItem {
        display: flex;
        align-items: center;
        height: 110rpx;
        border-bottom: 2rpx solid #EDEFF2;
        font-size: 28rpx;
        color: #000;

        .miniCardItemName {
          flex: 1;
        }

        .addImg {
          width: 48rpx;
          height: 48rpx;
        }

        .radioImg {
          width: 36rpx;
          height: 36rpx;
          margin-right: 16rpx;
        }

      }
    }


    .vertical {
      width: 2rpx;
      height: 36rpx;
      background: rgba(0, 0, 0, 0.1);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      margin: 0 34rpx;
    }

    .baochouBox {
      position: relative;
      height: 170rpx;

      .lable {
        position: absolute;
        top: 34rpx;
        left: 8rpx;
      }

      .baochou {
        // flex: 1;
        width: 75%;
        height: 100%;
        position: absolute;
        top: 0rpx;
        left: 150rpx;
        border-bottom: 2rpx solid #EDEFF2;
        padding-top: 30rpx;

        view {
          display: inline-block;
          margin-left: 30rpx;
        }

        .Zhihuan:nth-child(3) {
          position: absolute;
          left: -60rpx;
          top: 96rpx;
        }

        .Zhihuan:nth-child(4) {
          position: absolute;
          left: 80rpx;
          top: 96rpx;
        }

        .ipt {
          width: 170rpx;
          position: absolute;
          top: 96rpx;
          right: 0rpx;
          height: 40rpx;
        }
      }

      .radioImg {
        margin-right: 16rpx;
      }
    }

    .upImg {
      text-align: center;
      line-height: 52rpx;
      width: 128rpx;
      height: 52rpx;
      background: rgba(125, 129, 169, 0.1);
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      font-size: 24rpx;
      color: #7D81A9;
    }

    .txt_word {
      box-sizing: border-box;
      word-wrap: break-word;
      white-space: pre-line;
      width: 670rpx;
      height: 168rpx;
      background: #F2F3F6;
      border-radius: 8rpx;
      padding: 16rpx 20rpx;
    }

    .askTitle {
      margin: 32rpx 0 16rpx 0;
    }

    .bottomBox {
      margin-top: 16rpx;
      box-sizing: border-box;
      padding-top: 24rpx;
      width: 100%;
      height: 216rpx;
      background: #FFFFFF;
      border-radius: 28rpx 28rpx 0rpx 0rpx;

      .bottomTitle {
        margin-bottom: 16rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #EAA04A;
      }

      .btns {
        width: 662rpx;
        margin: 0 auto;

        view {
          box-sizing: border-box;
          display: inline-block;
          width: 320rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
        }

        .deleteBtn {
          margin-right: 22rpx;
          color: #7D81A9;
          border-radius: 40rpx;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
        }

        .confirmBtn {
          background: #7D81A9;
          border-radius: 40rpx;
          color: #FFFFFF;
        }
      }
    }

    .categoryShowContent {
      padding: 38rpx 32rpx;

      .categoryList {
        margin-top: 40rpx;

        .categoryItem {
          display: inline-block;
          width: 150rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          background: #F2F3F6;
          border-radius: 200rpx;
          font-size: 28rpx;
          margin-right: 22rpx;
          margin-bottom: 32rpx;
          color: #333;
        }


        .active {
          background-color: #7D81A9;
          color: #FFFFFF;
        }

        .categoryItem:nth-child(4n) {
          margin-right: 0;
        }
      }

      .categoryBtns {
        display: flex;
        margin-top: 60rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;

        .categoryBtnL {
          box-sizing: border-box;
          width: 320rpx;
          height: 80rpx;
          border-radius: 40rpx;
          border: 2rpx solid rgba(125, 129, 169, 0.3);
          color: #7D81A9;
          margin-right: 22rpx;
        }

        .categoryBtnR {
          width: 320rpx;
          height: 80rpx;
          color: #FFFFFF;
          background: #7D81A9;
          border-radius: 40rpx;
        }
      }
    }
    .oneBusinessItem {
      /deep/ .u-input {
        width: 350rpx!important;
      }
    }
  }
</style>